<template>
  <div class="tag-list">
    <el-tag :effect="effect[item.id]"
            :size="'large'"
            style="margin-left: 5px"
            v-for="item in tagList.list"
            :type="color[item.id%5]"
            @click="selectTag(item)">
      {{ item.name }}
    </el-tag>
    <PostItem v-for=" item in tagsPageData.tagsPostList" :key="item" :post="item"/>
    <pagination
        v-show="tagsPageData.total>10"
        :total="tagsPageData.total"
        :page="tagsPageData.pageNum"
        :limit="tagsPageData.pageSize"
        @pagination="paginationRecall"
    />
  </div>
</template>
<script setup lang="ts">
import {onMounted, ref} from "vue";
import {tagList, tagsPageData} from "@/store/customer/inedx";
import Pagination from "@/components/3rdPart/Pagination.vue";
import PostItem from "@/components/home/PostItem.vue";
import {useRoute} from "vue-router";

const {query} = useRoute()  //2.在跳转页面定义router变量，解构得到指定的query和params传参的参数
const effect = ref([])
const color = ref(['', 'success', 'warning', 'danger', 'info'])

onMounted(() => {
  if (tagsPageData.tagId != null) {
    effect.value[tagsPageData.tagId] = 'dark'
  }
  if (query.id != null || query.id != undefined) {
    selectTag(query);
  }
})

function selectTag(item: any) {
  effect.value[tagsPageData.tagId] = 'light';
  effect.value[item.id] = 'dark'
  tagsPageData.getList(tagsPageData.pageNum, tagsPageData.pageSize, item.id)
}

function paginationRecall(val: any) {
  tagsPageData.getList(val.page, val.limit, tagsPageData.tagId);
}
</script>